<template>
  <div class="index">
    <div class="header">
      <div class="logo">
        <span class="iconfont iconnew"></span>
      </div>
      <div
        class="search"
        @click="$router.push({name:'Search'})"
      >
        <van-icon name="search" />
        <span>搜索商品</span>
      </div>
      <div
        class="user"
        @click="$router.push({path:`/personal/${id}`})"
      >
        <van-icon name="manager-o" />
      </div>
    </div>

    <van-tabs
      v-model="active"
      sticky
      swipeable
    >
      <van-tab
        v-for="(value,index) in cateList"
        :key=index
        :title="value.name"
      >
        <van-list
          v-model="value.loading"
          :finished="value.finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check='false'
          :offset="10"
        >
          <van-pull-refresh
            v-model="value.isloading"
            @refresh="onRefresh"
          >
            <articleBolci
              v-for='(v,i) in value.postList'
              :key='i'
              :post='v'
              @click="handlerClick"
            ></articleBolci>
          </van-pull-refresh>

        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getCateList } from "@/apis/cate.js";
import { getPostList } from "@/apis/article.js";
import articleBolci from "@/components/articleBlock.vue";
export default {
  data() {
    return {
      id: "-1",
      active: localStorage.getItem("hm_toutiao_userId") ? 1 : 0,
      cateList: [],
    };
  },
  components: {
    articleBolci,
  },
  methods: {
    handlerClick(id) {
      this.$router.push({ path: `/articleDetail/${id}` });
    },
    onRefresh() {
      this.cateList[this.active].postList.length = 0;
      this.cateList[this.active].pageIndex = 1;
      this.cateList[this.active].finished = false;
      this.init();
    },
    onLoad() {
      // 加载这个栏目的下一页数据
      this.cateList[this.active].pageIndex++;
      this.init();
    },
    async init() {
      let resPost = await getPostList({
        pageSize: this.cateList[this.active].pageSize,
        pageIndex: this.cateList[this.active].pageIndex,
        category: this.cateList[this.active].id,
      });
      // 将当前栏目的loading重置为false
      this.cateList[this.active].loading = false;
      this.cateList[this.active].isloading = false;
      // 如果所有数据加载完毕，则需要手动的将当前栏目的finished重置为true,以显示没有更多数据的提示
      if (resPost.data.data.length < this.cateList[this.active].pageSize) {
        this.cateList[this.active].finished = true;
      }
      this.cateList[this.active].postList.push(...resPost.data.data);
    },
  },
  watch: {
    active() {
      if (this.cateList[this.active].postList.length == 0) {
        this.init();
      }
    },
  },
  // 在页面刷新的时候触发的钩子函数
  async mounted() {
    // 先判断本地存储有没有用户的ID值，用于时候给用户获取关于关注的标签页
    if (localStorage.getItem("hm_toutiao_userId")) {
      this.id = localStorage.getItem("hm_toutiao_userId");
    }
    if (localStorage.getItem("hm_catelist")) {
      this.cateList = JSON.parse(localStorage.getItem("hm_catelist"));
      if (localStorage.getItem("hm_toutiao")) {
        this.cateList.unshift(
          { id: 0, name: "关注", is_top: 1 },
          { id: 999, name: "头条", is_top: 1 }
        );
      } else {
        this.cateList.unshift({ id: 999, name: "头条", is_top: 1 });
      }
    } else {
      // 发送一个请求，获取关于导航栏的数据
      let res = await getCateList();
      // 将获取到的数据做修改，添加到可以存储数据的导航页的数据上
      this.cateList = res.data.data;
    }

    // 做添加操作
    this.cateList = this.cateList.map((value) => {
      return {
        ...value, // 把原来标签里的数据分解添加到新的数组里面
        postList: [], // 请求到的标签页的数据
        pageSize: 5, // 一个页面刷新出来的文章数量
        pageIndex: 1, // 默认显示的页数
        loading: false, // 上拉的刷新功能的状态
        finished: false, // 判断是否已经获取完当前便签的全部数据
        isloading: false, // 下拉刷新的获取数据状态
      };
    });
    this.init();

    document.querySelector(".van-sticky").onclick = (e) => {
      if ((e.target.className = "van-sticky")) {
        this.$router.push({ name: "cateManager" });
      }
    };
  },
};
</script>

<style lang="less" scoped>
/deep/.van-sticky {
  padding-right: 50px;
  &::before {
    content: "+";
    position: absolute;
    width: 51px;
    height: 44px;
    background-color: #fff;
    top: 0;
    right: 0;
    text-align: center;
    line-height: 42px;
    font-size: 35px;
  }
}
.index {
  .header {
    height: 40px;
    display: flex;
    justify-content: space-between;
    background-color: #f00;
    align-items: center;
    color: #fff;
  }
  .search {
    flex: 1;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 15px;
    text-align: center;
    line-height: 30px;
    .van-icon {
      font-size: 16px;
    }
  }
  .van-icon {
    font-size: 24px;
    padding: 0 10px;
  }
  .iconfont {
    font-size: 50px;
    padding: 0 10px;
  }
}
</style>